<template>
  <div>
    <div id="toolbar" class="toolbar">
    </div>
    <div style="padding: 1px 0; background-color: #ccc"></div>
    <div id="editor" class="text" style="min-height:400px;border:1px solid #ddd;"> <!--可使用 min-height 实现编辑区域自动增加高度-->

    </div>
  </div>
</template>

<script>
import { baseUrl,baseImgPath } from '../api/env';
import E from 'wangeditor'
export default {
  name: 'Editor',
  data () {
    return {
      baseUrl,
      baseImgPath,
      uploadUrl:baseUrl+'/common/imageUpload',
      editorContent: '',
      editor:null,
    }
  },

  props:{
    content:{
      type:String,
      required:false
    }
  },
  methods: {
    getContent: function () {
      return this.editorContent;
    }
  },
  mounted() {
    var that = this;
    this.editor = new E("#toolbar","#editor")
    //editor.customConfig.uploadImgShowBase64 = true ;
    //this.editor.config.pasteFilterStyle = false;//关闭粘贴样式的过滤
    //this.editor.config.lineHeights = ['1.6', '2', '2.5', '3'];
    //图片或附件上传
    this.editor.config.uploadImgMaxSize = 1 * 1024 * 1024;//不得超过1M的图片
    //this.editor.config.uploadImgShowBase64 = true
    this.editor.config.uploadImgServer = this.uploadUrl;
    this.editor.config.uploadImgHooks = {
      // 上传图片之前
      before: function(xhr) {
        console.log(xhr)

      },
      // 图片上传并返回了结果，图片插入已成功
      success: function(xhr) {
        console.log('success', xhr)
      },
      // 图片上传并返回了结果，但图片插入时出错了
      fail: function(xhr, editor, resData) {
        console.log('fail', resData)
      },
      // 上传图片出错，一般为 http 请求的错误
      error: function(xhr, editor, resData) {
        console.log('error', xhr, resData)
      },
      // 上传图片超时
      timeout: function(xhr) {
        console.log('timeout')
      },
      // 图片上传并返回了结果，想要自己把图片插入到编辑器中
      // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
      customInsert: function(insertImgFn, result) {
        // result 即服务端返回的接口
        console.log('customInsert', result)

        // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
        insertImgFn(baseImgPath+"/api"+result.data[0])
      }
    }

    // 配置 onchange 回调函数
    this.editor.config.onchange = function (newHtml) {
      that.editorContent = newHtml;
    }
// 配置触发 onchange 的时间频率，默认为 200ms
    this.editor.config.onchangeTimeout = 500 // 修改为 500ms
    this.editor.create()
    this.editor.txt.html(this.content);
  },
  watch: {
    content(val) {
      this.editor.txt.html(this.content);
    }
  },
}
</script>

<style scoped>
</style>
